
<template>
  <div class="log-panel">
    <!-- 标题栏 -->
    <div class="panel-title">
      <p class="title-t">{{$t('cmlpanel.console_log')}}</p>
      <div class="filter-module">
        <a-select size="small"
          defaultValue="default"
          :options='options'
          @change="changeModule">
        </a-select>
      </div>
      <ul class="filter-list">
        <li class="filter-item"
          :class="[logType.includes('info')?'active-info': '']"
          @click="filterLog('info')"><i class="platformicon icon_zhengchang"></i></li>
        <li class="filter-item"
          :class="[logType.includes('warn')?'active-warn': '']"
          @click="filterLog('warn')"><i class="platformicon icon_gaojing"></i></li>
        <li class="filter-item"
          :class="[logType.includes('error')?'active-error': '']"
          @click="filterLog('error')"><i class="platformicon icon_cuowu"></i></li>
      </ul>
      <button @click="clear"
        title="clear"
        class="btn clear"><i class="platformicon icon_qingchu"></i></button>
      <button @click="close"
        title="close"
        class="btn close"><i class="platformicon icon_guanbimianban"></i></button>
    </div>
    <!-- 内容区域 -->
    <div class="body"
      ref="body">
      <ul class="list">
        <li v-for="(log, index) in logs"
          class="item"
          :class="log.type"
          :key="index">
          <i class="tag"
            :class="log.module">[{{log.module}}]</i>
          <div class="log-text">{{log.msg}}</div>
          <i class="time">{{log.date}}</i>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import * as anov from 'anov-core'
import { mapMutations } from 'vuex'
import { Select } from 'ant-design-vue'
// 控制台 zhu18-9-25
export default {
  name: 'LogList',
  components: {
    ASelect: Select
  },
  data() {
    return {
      allLogs: [], // 所有的日志
      currentModule: 'default', // 当前模块
      logType: ['info', 'warn', 'error'] // 日志错误等级筛选
    }
  },
  computed: {
    // 构造用于显示的日志
    logs() {
      let module = this.allLogs.filter(log => {
        if (this.currentModule === 'default') {
          return true
        } else {
          return this.currentModule === log.module
        }
      })
      return module.filter(log => {
        if (this.logType.length > 0) {
          return this.logType.includes(log.type)
        } else {
          return false
        }
      })
    },
    // 构造模块选项
    options() {
      let opt = []
      this.allLogs.forEach(log => {
        opt.push(log.module)
      })
      opt = [...new Set(opt)]
      let opts = [{ value: 'default', label: 'default' }],
        temp = opt.map(o => {
          return {
            value: o,
            label: o
          }
        })
      return opts.concat(temp)
    }
  },
  watch: {
    allLogs() {
      this.scrollBottom()
    }
  },
  created() {
    this.allLogs = anov.runtimeServer.getLog()
  },
  mounted() {
    this.scrollBottom()
  },
  methods: {
    ...mapMutations('cmlpanel', ['setConsolePanelLog']),
    // 滚动控制
    scrollBottom() {
      setTimeout(() => {
        this.$refs.body.scrollTop = this.$refs.body.scrollHeight
      }, 100)
    },
    // 过滤日志类型
    filterLog(type) {
      if (this.logType.includes(type)) {
        this.logType.splice(this.logType.indexOf(type), 1)
      } else {
        this.logType.push(type)
      }
    },
    // 切换模块
    changeModule(module) {
      this.currentModule = module
    },
    // 清除日志
    clear() {
      anov.runtimeServer.delLog()
    },
    // 关闭面板
    close() {
      this.setConsolePanelLog()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/panel-var.scss';
@import '../../style/panel-mixin.scss';
.log-panel {
  flex: 1;

  width: 100%;

  color: $text-color;

  font-family: Menlo, Monaco, 'Courier New', monospace;
  .panel-title {
    height: 24px;
    padding-left: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);

    background: #171515c4;

    @include flex(row, space-between);
    .title-t {
      white-space: nowrap;
    }
    .filter-module {
      margin-right: 10px;
      margin-left: auto;
      /deep/ .ant-select .ant-select-selection, .ant-input-number .ant-select-selection {
        border-bottom: none;
      }
    }
    .filter-list {
      padding-left: 10px;
      border-left: 1px solid;

      color: #c1fffb66;

      font-size: 12px;
      line-height: 1;

      @include flex(row, flex-end);
      .filter-item {
        margin-right: 10px;

        transition: all ease .2s;

        cursor: pointer;
        i {
          font-size: $fz-ssm;
        }
        &:hover {
          color: #c1fffbb3;
        }
        &.active-info {
          color: #24e0f1;
        }
        &.active-warn {
          color: rgb(200, 230, 73);
        }
        &.active-error {
          color: #ef8784;
        }
      }
    }
    .btn {
      height: 12px;
      padding: 0 10px;
      border: none;
      border-left: 1px solid #c1fffb66;

      color: #c1fffb66;
      background: transparent;

      font-size: $fz-ssm;
      line-height: 1;
      &:hover {
        color: #c1fffbb3;
      }
      i {
        font-size: 12px;
      }
    }
    button[disabled] {
      color: gray;

      cursor: not-allowed;
      &:hover {
        color: gray;
      }
    }
  }
  .body {
    overflow: auto;

    height: calc(100% - 24px);
  }
  .item {
    // white-space: nowrap;
    // text-overflow: ellipsis;
    display: flex;
    overflow: hidden;

    min-height: 20px;
    padding-left: 10px;
    border-bottom: 1px solid rgba(66, 66, 66, .5);

    &.error {
      border-bottom: 1px solid hsla(2, 77%, 23%, 1);

      color: #ef8784;
      background: hsla(2, 77%, 23%, .3);
    }
    &.warn {
      border-bottom: 1px solid #b0cb6447;

      color: rgb(200, 230, 73);
      background: rgba(152, 160, 74, .2);
    }
    &.info {
      color: #24e0f1;
    }
    .tag {
      color: #aaa;
    }
    &:hover {
      background-color: #ffffff0d;
    }
  }
  .log-text {
    flex: 1;

    width: 100%;
    padding: 0 8px;
  }
  .time {
    float: right;

    padding-right: 5px;

    color: #8a8a8a;
  }
}
</style>
